<template>
  <div>
    <table>
      <sold-out-item v-for="item in goodsArr" :item="item" />
    </table>
    <div>All Number: {{ sum }}</div>
  </div>
</template>

<script>
import SoldOutItem from "components/soldOutItem/SoldOutItem";

export default {
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
    };
  },
  components: {
    SoldOutItem,
  },
  computed: {
    sum() {
      return this.goodsArr.reduce((old, item) => (old += item.count), 0);
    },
  },
  watch: {
    goodsArr: {
      deep: true,
      handler() {
        this.goodsArr.forEach((item) =>
          item.count < 0 ? (item.count = 0) : ""
        );
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>